<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>{$title}</title>
    <style type="text/css">
        *{
            margin: 0;padding: 0;
        }
        .rule{
            background: #f6f6f6;
        }
        .top_he{
            height: 1rem;
            background: #411681;
            line-height: 1rem;
        }
        .top {
            float: left;
            width: 33.3%;
            color: #fff;
        }
        .top_l{
            padding-left: 0.4rem;
            font-size: 0.4rem;

        }
        .top_c{
            text-align: center;
            font-size: 0.3rem;
        }
        .content{
            padding: 0.4rem 0.3rem;
            height: 11.5rem;
        }
        /*.content p{*/
            /*line-height: 0.4rem;*/
            /*font-size: 0.22rem;*/
        /*}*/
        /*.content h3{*/
            /*margin-bottom: 0.2rem;*/
            /*font-size: 0.3rem*/
        /*}*/
        /*.content h4{*/
            /*margin-bottom: 0.1rem;*/
            /*font-size: 0.25rem;*/
        /*}*/

    </style>

</head>
<body>
<div class="rule">
    <div class="content">
        {$content}
    </div>
</div>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script>
    $.extend({
        F_SIZE:function(size){//使用传参的方式，以便灵活调用
            var $html = $('html');
            var $window = $('window');
            var $body = $('body');
            var psdsize = size;//这里表示我设计图的宽度
            var htmlfont = $body.width()/psdsize*100 + 'px';//计算字体大小
            $html.css('font-size', htmlfont);//设置字体大小
            $body.css('opacity', 1);//针对一些手机浏览器的默认样式
            //屏幕尺寸修改时，改变其大小
            $(window).resize(function(event) {
                htmlfont = $body.width()/psdsize*100 + 'px';
                $html.css('font-size', htmlfont);
            });
        }
    });
    $.F_SIZE(667);
</script>


</body>
</html>